<template>
  <view class="page">
    <view class="group_3">
      <view class="section_1">
        <view class="thumbnail_4"></view>
        <text lines="1" class="text_3">选择充值挥豆</text>
      </view>

      <view class="grid_1">
        <view
          class="list-items_1-0"
          :class="{ diyBg: navIndexValue == index }"
          @click="setNavIndexValue(index)"
          v-for="(item, index) in huiDouPrice"
          :key="index"
        >
          <view class="group_4-1" v-if="calculateFunPrice(item.Price,item.VIP_Price)<10 && calculateFunPrice(item.Price,item.VIP_Price)>0">
            <view class="text-wrapper_bg">
              <text lines="1" class="text_4-1">{{calculateFunPrice(item.Price,item.VIP_Price)}}折</text>
            </view>
          </view>
          <view class="text-wrapper_3-0">
            <text
              lines="1"
              class="text_6-0"
              :class="{ diyColor: navIndexValue == index }"
              >{{ item.Score }}</text
            >
            <text
              lines="1"
              class="text_7-0"
              :class="{ diyColor: navIndexValue == index }"
              >挥豆</text
            >
          </view>
          <text
            lines="1"
            class="text_9-0"
            :class="{ diyColor: navIndexValue == index }"
            >{{ item.Price }}元</text
          >
        </view>
      </view>

      <view class="text-wrapper_5" @click="payHuiDou">
        <text lines="1" class="text_10">立即充值</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      navIndexValue: 0,
      huiDouPrice: [],
    };
  },
  onLoad() {
    this.getPrice();
  },
	onShow(){
		this.$util.getSystemUtils()
	},
  methods: {
    calculateFunPrice(oldPrice,nowPrice) {
        let funPrice = ((nowPrice / oldPrice) * 10).toFixed(0);
        return funPrice;
    },
    setNavIndexValue(index) {
      this.navIndexValue = index;
    },
    async getPrice() {
      let huiDouPrice = await this.$api.post("/Common/GetServerPriceList", {
        Item: "会员充值",
      });
      if (huiDouPrice.code == 0) {
        this.huiDouPrice = huiDouPrice.data;
      }
    },
    async payHuiDou() {
      if(this.huiDouPrice.length<=0) return
      let myPrice = this.huiDouPrice[this.navIndexValue].Price
      let huiDouNum = this.huiDouPrice[this.navIndexValue].Score;
      let pres = await this.$api.post("Payment/Charge", {
        total_fee: myPrice,
        SourcePage: "payHuiDou",
        EventType: "购买挥豆",
        EventID: huiDouNum,
        // #ifdef MP-WEIXIN
        PayChannel: "weixin",
        // #endif
        // #ifdef APP
        PayChannel: "app",
        // #endif
      });

      let payObj = JSON.parse(pres.data);
      uni.requestPayment({
        provider: "wxpay",
        // #ifdef APP
        orderInfo: payObj,
        // #endif
        // #ifdef MP-WEIXIN
        timeStamp: payObj.timeStamp,
        nonceStr: payObj.nonceStr,
        package: payObj.package,
        signType: payObj.signType,
        paySign: payObj.paySign,
        // #endif
        success: async (res) => {
          this.$pv.msg("支付成功");
          uni.navigateBack({
            delta: 1,
          });
        },
        fail: (err) => {
          this.$pv.msg("支付失败");
        },
      });
    },
  },
};
</script>

<style lang="scss">
.page {
  background-color: rgba(255, 255, 255, 1);
  position: relative;
  width: 750rpx;
  height: 1624rpx;
  overflow: hidden;
  padding-bottom: 4rpx;
  display: flex;
  flex-direction: column;
  .group_3 {
    background-color: rgba(255, 255, 255, 1);
    margin-top: -4rpx;
    display: flex;
    flex-direction: column;
    padding: 30rpx 20rpx;
    .section_1 {
      width: 210rpx;
      display: flex;
      justify-content: space-between;
      .thumbnail_4 {
        width: 6rpx;
        height: 32rpx;
        margin: 6rpx 0 6rpx 0;
        background-color: #706eee;
      }
      .text_3 {
        overflow-wrap: break-word;
        color: rgba(51, 51, 51, 1);
        font-size: 32rpx;
        font-family: PingFang-SC-Bold;
        font-weight: normal;
        text-align: left;
        white-space: nowrap;
        line-height: 44rpx;
      }
    }
    .grid_1 {
      // width: 700rpx;
      margin-top: 40rpx;
      display: flex;
      flex-wrap: wrap;
      .list-items_1-0 {
        border-radius: 28rpx;
        position: relative;
        width: calc(50% - 20rpx); /* 每列宽度为屏幕的一半减去列间距 */
        height: 176rpx;
        border: 1px solid rgba(228, 228, 228, 1);
        display: flex;
        flex-direction: column;
        margin: 10rpx;
        padding: 38rpx 80rpx;
        background: transparent;
        justify-content: center;
        box-sizing: border-box;
        align-items: center;
        .group_4-1 {
          position: absolute;
          left: 0rpx;
          top: 0rpx;
          display: flex;
          .text-wrapper_bg {
            background: linear-gradient(to right, #fa2427, #ff6408);
            background-size: 100% 100%;
            display: flex;
            flex-direction: column;
            padding: 4rpx 24rpx 4rpx 24rpx;
            border-radius: 25rpx 0 25rpx 0;
            .text_4-1 {
              overflow-wrap: break-word;
              color: rgba(255, 255, 255, 1);
              font-size: 24rpx;
              font-family: PingFang-SC-Medium;
              font-weight: normal;
              text-align: left;
              white-space: nowrap;
              line-height: 34rpx;
            }
          }
        }
        .text-wrapper_3-0 {
          width: 152rpx;
          display: flex;
          justify-content: space-between;
          > text {
            overflow-wrap: break-word;
            font-family: PingFang-SC-Bold;
            font-weight: normal;
            text-align: right;
            white-space: nowrap;
            color: rgba(51, 51, 51, 1);
          }
          .text_6-0 {
            line-height: 58rpx;
            font-size: 42rpx;
          }
          .text_7-0 {
            font-size: 36rpx;
            font-weight: bold;
            margin-top: 4rpx;
          }
        }
        .text_9-0 {
          width: 80rpx;
          overflow-wrap: break-word;
          color: rgba(102, 102, 102, 1);
          font-size: 28rpx;
          font-family: PingFang-SC-Medium;
          font-weight: normal;
          white-space: nowrap;
          line-height: 40rpx;
          margin: 0 44rpx 0 44rpx;
          text-align: center;
        }
      }
      .diyBg {
        background: rgba(112, 110, 238, 0.1);
        border: 2rpx solid #706eee;
      }
    }
    .text-wrapper_5 {
      background-color: rgba(112, 110, 238, 1);
      border-radius: 50rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 22rpx 270rpx 22rpx 270rpx;
      margin-top: 80rpx;
      .text_10 {
        overflow-wrap: break-word;
        color: rgba(255, 255, 255, 1);
        font-size: 32rpx;
        font-family: PingFang-SC-Bold;
        font-weight: normal;
        text-align: left;
        white-space: nowrap;
        line-height: 44rpx;
      }
    }
  }
}
.diyColor {
  color: #706eee !important;
}
</style>